What Are the Different Events in JavaScript?

JavaScript events are actions or occurrences that happen in the browser. These events can be triggered by user interactions, browser activity, or JavaScript itself.

1. Mouse Events

• click: Triggered when an element is clicked.
• dblclick: Triggered when an element is double-clicked.
• mouseover: Triggered when the mouse pointer enters an element.
• mouseout: Triggered when the mouse pointer leaves an element.
• mousedown: Triggered when a mouse button is pressed on an element.
• mouseup: Triggered when a mouse button is released.

Example:

        
document.getElementById("btn").addEventListener("click", () => {
    console.log("Button clicked!");
});
        
    

Output: Logs "Button clicked!" when the button is clicked.

2. Keyboard Events

• keydown: Triggered when a key is pressed down.
• keyup: Triggered when a key is released.
• keypress: Triggered when a key is pressed (deprecated).

Example:

        
document.addEventListener("keydown", (event) => {
    console.log("Key pressed:", event.key);
});
        
    

Output: Logs the key pressed.

3. Form Events

• submit: Triggered when a form is submitted.
• change: Triggered when the value of an input changes.
• focus: Triggered when an input field gains focus.
• blur: Triggered when an input field loses focus.

Example:

        
document.getElementById("form").addEventListener("submit", (event) => {
    event.preventDefault(); // Prevent form submission
    console.log("Form submitted!");
});
        
    

Output: Logs "Form submitted!" on form submission.

4. Window Events

• load: Triggered when the page has fully loaded.
• resize: Triggered when the window is resized.
• scroll: Triggered when the user scrolls the page.
• unload: Triggered when the page is unloaded (deprecated).

Example:

        
window.addEventListener("resize", () => {
    console.log("Window resized!");
});
        
    

Output: Logs "Window resized!" on window resize.

Summary: